﻿@inject TodoClient Client

@if (todos is null)
{
    <div class="d-flex justify-content-center align-items-center vh-100">
        <div class="spinner-border" role="status"></div>
    </div>
}
else
{
    <h6 class="mb-3">Todo List</h6>

    <EditForm @ref="@form" Model="@this" OnValidSubmit="@AddTodo" class="d-flex justify-content-center align-items-center mb-4">
        <DataAnnotationsValidator />
        <div class="form-outline flex-fill">
            <InputText autofocus class="form-control form-control-lg" @bind-Value="@NewTodo" placeholder="Type a new todo item" />
            <ValidationMessage For="@(() => NewTodo)" />
        </div>
    </EditForm>

    <ul class="list-group mb-0">
        @foreach (var todo in todos)
        {
            <li class="list-group-item d-flex justify-content-between align-items-center border-start-0 border-top-0 border-end-0 border-bottom rounded-0 mb-2" @key="@todo.Id">
                <div class="d-flex align-items-center">
                    <input class="form-check-input me-2" type="checkbox" value="" aria-label="..." />
                    @todo.Title
                </div>
                <a data-mdb-toggle="tooltip" title="Remove item" style="text-decoration:none" @onclick="@(() => DeleteTodo(todo))">🗙</a>
            </li>
        }
    </ul>
}

@code {
    List<TodoItem>? todos;
    EditForm? form;

    [Required]
    public string? NewTodo { get; set; }

    [Parameter] 
    public EventCallback OnForbidden { get; set; }

    protected override async Task OnInitializedAsync()
    {
        await LoadTodos();
    }

    async Task LoadTodos()
    {
        (var statusCode, todos) = await Client.GetTodosAsync();

        if (statusCode == HttpStatusCode.Forbidden || statusCode == HttpStatusCode.Unauthorized)
        {
            await OnForbidden.InvokeAsync();
        }
    }

    async Task AddTodo()
    {
        var createdTodo = await Client.AddTodoAsync(NewTodo);
        if (createdTodo is not null)
        {
            NewTodo = null;
            form!.EditContext!.MarkAsUnmodified();
            todos!.Add(createdTodo);
        }
    }

    async Task DeleteTodo(TodoItem todo)
    {
        if (await Client.DeleteTodoAsync(todo.Id))
        {
            todos!.Remove(todo);
        }
    }
}
